<template>
  <div class="seckillWrap">
    <!-- 底部tabbar -->
    <!-- <div class="tabWrapper">
      <div class="tabItem" :data-type="type" @click="tabChange(1)">
        <img :src="isSpikeAct?spikeIcon[1]:spikeIcon[0]" />
        <p :class="{'actText':isSpikeAct,'text':!isSpikeAct}">秒杀商品</p>
      </div>
      <div class="tabItem" :data-type="type" @click="tabChange(2)">
        <img :src="ismyGoodsAct?goodsIcon[1]:goodsIcon[0]" />
        <p :class="{'actText':ismyGoodsAct,'text':!ismyGoodsAct}">我的商品</p>
      </div>
    </div>-->

    <!-- 秒杀商品 -->
    <div class="seckillGoods">
      <div class="bannerPic">
        <img src="@/assets/images/seckill/bg.jpg" />
      </div>
      <!-- 规则 -->
      <img class="rule" src="@/assets/images/seckill/rule.png" @click="goRuleDetail()" />
      <div class="vip">
        <img src="@/assets/images/seckill/newvip.png" @click="goRuleDetail()" />
      </div>
      <img class="paopao" src="@/assets/images/seckill/paopao.png" @click="goRuleDetail()" />
    </div>
    <div :class="{'tabs':seckilltab == 0,'tabs1':seckilltab == 1}">
      <!-- <p @click="seckilltab = 0">本周秒杀</p>
      <p @click="seckilltab = 1">下周秒杀</p>-->
      <p @click="clicktab(0)">本周秒杀</p>
      <p @click="clicktab(1)">下周秒杀</p>
    </div>
    <div class="seckilltime">
      <p>{{seckilltime}}</p>
      <div class="acttime" v-if="seckilltime != '本周秒杀已结束'">
        <div class="green">{{timer.d}}</div>&nbsp;天&nbsp;
        <div class="green">{{timer.h &lt;'10'?('0'+timer.h):timer.h}}</div>&nbsp;时&nbsp;
        <div class="green">{{timer.m &lt;'10'?('0'+timer.m):timer.m}}</div>&nbsp;分&nbsp;
        <div class="green">{{timer.s &lt;'10'?('0'+timer.s):timer.s}}</div>&nbsp;秒&nbsp;
      </div>
    </div>
    <div class="pinkwarn">每周六1场，每款产品可享1次权益，数量有限，先到先得</div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      class="contentWrap"
    >
      <div
        class="content"
        v-for="item in newlist"
        :key="item.id"
        @click="jumpProductDetail(seckilltime,item.id,item.stock)"
      >
        <img :src="imgBaseUrl+item.productImg" />
        <div class="center">
          <p class="title">{{item.title}}</p>
          <!-- <p class="subtitle">{{item.subTitle}}</p> -->
          <div class="botWrapper">
            <div class="bot">
              <!-- <div class="rest">剩余{{item.stock}}</div> -->
              <p
                class="coin"
              >{{item.coin == 0 && item.price == 0? '0元':item.coin == 0 && item.price > 0?`${item.price}元`:item.coin > 0 && item.price > 0?`${item.coin}积分+${item.price}元`:`${item.coin}积分`}}</p>
              <p class="coin">
                {{item.product.vipCoin == 0 && item.price == 0? '0元':item.product.vipCoin == 0 && item.price > 0?`${item.price}元`:item.product.vipCoin > 0 && item.price > 0?`${item.product.vipCoin}积分+${item.price}元`:`${item.product.vipCoin}积分`}}
                <span
                  class="spanimg"
                ></span>
              </p>
              <p class="price">原价：{{item.realPrice}}元</p>
            </div>
            <button
              class="btn"
            >{{seckilltime==='距活动结束还有'?'立即秒杀':(seckilltime==='本周秒杀已结束'?'秒杀结束':'即将开始')}}</button>
          </div>
        </div>
      </div>
    </van-list>
    <!-- 规则弹窗 -->
    <div class="ruleWrap" v-if="openRule">
      <img
        :src="'http://img.580travel.com/image/bocmm/seckill/close.png'"
        class="closeBtn"
        @click="closeRule()"
      />
      <div class="ruleBorder">
        <div class="ruleContent">
          <p>一、活动时间</p>
          <!-- <p>即日起至2020年12月31日</p> -->
          <p>即日起至2020年9月30日，每周六早上10:00:00开抢，数量有限，秒完为止，结束时间为该周周日24:00:00。 （每期具体活动时间以分行微信公众号公告为准）</p>
          <p class="marTop">二、活动对象</p>
          <p>在邮储银行厦门分行微信公众号“客户俱乐部”线上认证且有积分的客户（含VIP客户），以下简称“特邀客户”。</p>
          <p class="marTop">三、活动内容</p>
          <p>1.特邀客户：通过“积分+消费”的方式抢购爆款商品。</p>
          <p>2.VIP客户专享：消耗更少积分（按1.5倍折算兑购）参与商品秒杀。</p>
          <!-- <p>(3) 购买成功后，可在“邮储银行厦门分行”微信公众号一悦享优惠一客户俱乐部一我的订单中查看订单信息。</p> -->
          <p class="marTop">四、参与方式</p>
          <p>1.参与周秒杀活动的客户，通过邮储银行厦门分行微信公众号，打开“客户俱乐部”认证，打开“美周末-超值秒杀日”参与秒杀活动。</p>
          <p>2.客户以持有的积分，支付1元起秒杀价格，即有机会抢购爆款商品。抢购成功后，后台自动扣减客户相关积分。</p>
          <p class="marTop">五、活动规则</p>
          <p>1、参加本活动的客户即视为理解并同意本活动细则。</p>
          <p>2、每周秒杀活动商品数量有限，秒完为止。</p>
          <p>3、活动期间，单周同一客户限享每款产品秒杀1次，同一微信号、身份证、银行卡、手机号视为同一客户。同一身份证号实名信息视为同一客户，同一实名信息的不同微信号视为同一客户。</p>
          <p>4、本活动以“客户积分消耗+消费支付”秒杀商品/服务，客户积分以邮储银行厦门分行微信公众号“客户俱乐部”认证积分为准，本优惠以单笔秒杀订单最终结算金额为准。</p>
          <p>5、参加秒杀活动的商品/服务，邮费部分由客户和商家约定选择，以该商品/服务上架规则说明为主，客户按照每件商品/服务的规则进行使用。部分订单需邮寄，邮寄费用由客户选择自行承担，邮费部分不享受该优惠。如已付邮费但未发货的，由商家退客户已付的邮费。因邮费引起的纠纷请与银盟五八零沟通处理。</p>
          <p>6、退单规定:客户在参与秒杀活动之后，若发生退单行为，视同秒杀权益已经使用，只退还客户支付的款项，积分不退，且不可再次参与本周秒杀，请谨慎退单。</p>
          <p>7、异常交易处理：对于非真实交易、取消/退款交易均不计入本次活动。违反邮储银行厦门分行微信公众号客户俱乐部积分规则约定条款，或出现账户状态不正常或违法交易等情况的，邮储银行厦门分行有权随时取消其参加本次活动的资格，并保留采取其他相应法律措施的权利。</p>
          <p>8、如出现不可抗力的情况，邮储银行厦门分行有权暂停或取消本次活动，并可依相关法律法规的规定主张免责。</p>
          <p>9、本活动秒杀商品/服务提供方为银盟五八零，该公司负责秒杀商品/服务的解释权，活动期间如对商品/服务有任何疑问，可拨打客服电话0592-5215580咨询、反馈。</p>
          <p>10、申明:在法律许可范围内，邮储银行厦门分行有权修订本活动条款及细则（包括但不限于参加资格、交易时间及优惠方式等）、暂停或取消本活动、并经相关途径（官方网站、短信、微信公众号、各分支网点等）公告后生效。</p>
          <p>11、其他未尽事宜：本活动详细办法以邮储银行微信公众号公告为准，其他未尽事宜，全部依照邮储银行厦门分行微信公众号客户俱乐部积分规则约定条款。</p>
          <p>12、活动期间，如对活动有疑问请咨询联商务股份有限公司厦门分公司客服电话0592-5215580（服务时间：8：00-20：00），或邮储银行厦门分行活动网点电话（服务时间：9：00-17：00），活动网点详见对外宣传材料。</p>
          <p class="marTop">六、活动网点</p>
          <img src="@/assets/images/seckill/station.jpg" alt />
        </div>
      </div>
    </div>
    <img @click="act" class="btnimg" src="@/assets/images/seckill/tohome.png" alt />
  </div>
</template>

<script>
import { imgBaseUrl, baseUrl } from '@/config/env.js';
import { Tab, Tabs, List, Cell } from 'vant';
import weixin from '@/components/wx/wx.js';
export default {
  data() {
    return {
      password: '',
      timeout: '',
      newlist: [],
      timer: { d: '0', h: '', m: '', s: '' },
      seckilltime: '',
      seckilltab: 0,
      imgBaseUrl,
      openRule: false,
      active: 0,
      list: [],
      loading: false,
      finished: false,
      spikeIcon: [
        require('@/assets/images/spike.png'),
        require('@/assets/images/red_seckill.png')
      ],
      goodsIcon: [
        require('@/assets/images/mygoods.png'),
        require('@/assets/images/Cut_price_list.png')
      ],
      ismyGoodsAct: false, // 我的商品开关
      startDate: '', // 接收前页传来的参
      endDate: '', // 接收前页传来的参
      mySpikeList: [], // 秒杀到的商品列表
      type: 1,
      seckillData: {
        typeTop: [],
        typeLeft: [],
        list: [],
        timer: { h: [], m: [], s: [] }
      } // 秒杀数据
    };
  },
  created() {
    document.getElementsByTagName('body')[0].style.backgroundColor = 'white';

    this.$http.post('/tuser/userInfo', {}).then(res => {
      if (res.data.code === '0') {
        if (res.data.object.isAuth === '1') {
          if (this.$route.query.password) {
            this.$http
              .post('/seckill/seckillBind', {
                inviterWhiteId: this.$route.query.password,
                inviteeWhiteId: res.data.object.bankUserid,
                userName: res.data.object.username,
                idCardNo: res.data.object.idCardNo,
                telphone: res.data.object.telphone
              })
              .then(result => {
                console.log(result);
              });
          }
        } else {
          if (this.$route.query.password) {
            window.sessionStorage.setItem(
              'message',
              this.$route.query.password
            );
          }
        }
      }
    });
  },
  mounted() {
    this.getpassword();
    this.getSourceList();
    this.getcusment();
    this.mySeckillOrder();
    this.tabChange(parseInt(this.type)); // 进入秒杀页面，自动获取type=1
    this.type = this.$route.query.type; // 接收成功页传来的类型
    this.tabChange(parseInt(this.type)); // 成功页传来后，调此方法
  },
  components: {
    'van-tabs': Tabs,
    'van-tab': Tab,
    'van-list': List,
    'van-cell': Cell
  },

  methods: {
    act() {
      this.$router.push('/');
    },
    initWxChat() {
      const url = window.location.href.split('#')[0];
      const param = {
        title: '邮储美周末--超值秒杀日',
        desc: '1元起秒杀 “邮”你来兑',
        link:
          baseUrl +
          'entrance/goto?redir=' +
          encodeURIComponent(
            window.location.href.split('#')[1] + '?password=' + this.password
          ),
        imgUrl: 'http://img.580travel.com/youchu/miaosha.jpg',
        localUrl: url
      };
      weixin.wxChat(this, param);
    },
    getpassword() {
      this.$http.post('/tuser/userInfo', {}).then(res => {
        if (res.data.code === '0') {
          if (res.data.object.isAuth === '1') {
            this.$http.post('/seckill/getFromUser', {}).then(res => {
              this.password = res.data.object;
              console.log(res);
              this.initWxChat();
            });
          } else {
            this.initWxChat();
          }
        }
      });
    },
    getcusment() {
      if (this.$route.query.distributor) {
        window.sessionStorage.setItem(
          'distributor',
          this.$route.query.distributor
        );
      }
    },
    onLoad() {
      // 异步更新数据
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 500);
    },
    clicktab(type) {
      setTimeout(() => {
        clearInterval(this.timeout);
      }, 100);
      this.seckilltab = type;
      this.newlist = [];
      this.list = [];
      this.loading = true;
      this.finished = false;
      this.onLoad();
      this.seckilltime = '';
      this.timer.d = '0';
      this.timer.h = '';
      this.timer.m = '';
      this.timer.s = '';
      setTimeout(() => {
        this.getSourceList();
      }, 100);
    },
    // 获取当天活动场次列表
    getSourceList() {
      this.$http
        .post('/seckill/list', { type: this.seckilltab === 0 ? '1' : '2' })
        .then(res => {
          console.log(res);
          if (res && res.data.object) {
            res.data.object.map((n, index) => {
              this.newlist = n.seckillList;
              console.log(this.newlist);
              this.timeout = setInterval(() => {
                const nowTime = new Date().getTime();
                if (nowTime < n.seckillStart) {
                  // this.seckillData.typeTop.push('即将开始');
                  // this.seckillData.typeLeft[index] = '距开始';
                  this.seckilltime = '距活动开始还有';

                  const time = (n.seckillStart - nowTime) / 1000; // 获取天、时、分、秒

                  const d = parseInt(time / (60 * 60 * 24));
                  const h = parseInt((time % (60 * 60 * 24)) / 3600);
                  const m = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
                  const s = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
                  this.timer.d = d;
                  this.timer.h = h;
                  this.timer.m = m;
                  this.timer.s = s;
                  // console.log(h);
                } else if (
                  nowTime >= n.seckillStart &&
                  nowTime < n.seckillEnd
                ) {
                  // this.seckillData.typeTop.push('正在秒杀');
                  // this.seckillData.typeLeft[index] = '距结束';
                  this.seckilltime = '距活动结束还有';
                  const time = (n.seckillEnd - nowTime) / 1000; // 获取天、时、分、秒
                  const d = parseInt(time / (60 * 60 * 24));
                  const h = parseInt((time % (60 * 60 * 24)) / 3600);
                  const m = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
                  const s = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
                  this.timer.d = d;
                  this.timer.h = h;
                  this.timer.m = m;
                  this.timer.s = s;
                } else if (nowTime >= n.seckillEnd) {
                  // this.seckillData.typeTop.push('秒杀结束');
                  this.seckilltime = '本周秒杀已结束';
                }
              }, 1000);
            });
            console.log('秒杀', this.seckillData);
          }
        });
    },

    // 跳转产品详情页
    jumpProductDetail(type, id, stock) {
      this.$router.push({
        path: '/seckillDetail',
        query: {
          id: id,
          stock: stock
        }
      });
      // if (type === '距活动结束还有') {
      //   this.$router.push({
      //     path: '/seckillDetail',
      //     query: {
      //       id: id,
      //       stock: stock
      //     }
      //   });
      // }
      // if (type === '距活动开始还有') {
      //   Toast('即将秒杀，敬请期待哦~');
      // }
      // if (type === '本周秒杀已结束') {
      //   Toast('对不起，秒杀已结束，下回再来哦~');
      // }
    },

    // 兑换秒杀产品
    // exchangeSecKill() {
    //   this.$http
    //     .post('/coin/exchangeSecKill', { sourceProductId: '11' })
    //     .then(res => {
    //       console.log('兑换秒杀产品', res);
    //     });
    // },

    // 我的商品
    mySeckillOrder() {
      this.$http.post('/order/seckillList', {}).then(res => {
        console.log(res);
        // if (res && res.data.code === '0' && res.data.object) {
        this.mySpikeList = res.data.list;
        console.log('我的商品', res.data.list);
        // }
      });
    },

    // 我的商品页  使用规则按钮
    goDetail(e) {
      console.log(e);
      this.$router.push({
        path: '/seckillDetail',
        query: { id: e }
      });
    },

    // 我的商品页，立即核销
    // jumpWriteOff(e) {
    //   const id = e.toString();
    // },

    // 秒杀到的商品列表
    spikeList() {
      this.$http
        .post('/order/spikeList', { pageNum: '0', pageSize: '500' })
        .then(res => {
          if (res.data.list) {
            this.mySpikeList = res.data.list;
            this.productId = res.data.list[0].productId;
          }
        });
    },
    // 规则弹窗
    goRuleDetail() {
      document.querySelector('body').setAttribute('style', 'overflow:hidden');
      this.openRule = true;
    },
    // 关闭规则弹窗
    closeRule() {
      document
        .querySelector('body')
        .removeAttribute('style', 'overflow:hidden');
      this.openRule = false;
    },

    // 底部导航切换
    tabChange(type) {
      if (type === 1) {
        this.ismyGoodsAct = false;
      } else if (type === 2) {
        this.ismyGoodsAct = true;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.pinkwarn {
  width: 100%;
  font-size: 26px;
  letter-spacing: 1px;
  color: #1b1112;
  margin: 30px auto;
  text-align: center;
}
.acttime {
  display: flex;
  padding-right: 20px;
  .green {
    width: 32px;
    height: 32px;
    background-color: #1c4237;
    border-radius: 0.07rem;
    text-align: center;
    font-size: 0.33rem;
    color: #fdfcfb;
  }
}
.seckilltime {
  width: 700px;
  height: 90px;
  background-image: url(../../assets/images/seckill/seckilltime.png);
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  color: #1c4237;
  p {
    padding-right: 80px;
  }
}
.tabs {
  width: 700px;
  height: 62px;
  background-image: url(../../assets/images/seckill/nowweek.png);
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 30px;
  p {
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 62px;
  }
}
.tabs1 {
  width: 700px;
  height: 62px;
  background-image: url(../../assets/images/seckill/nextweek.png);
  background-size: 100%;
  background-repeat: no-repeat;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 30px;
  p {
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 62px;
  }
}
.vip {
  width: 100%;
  // height: 100px;
  display: flex;
  justify-content: center;
  // z-index: 10;
  padding: 30px;
  position: relative;
  img {
    width: 390px;
    height: 58px;
  }
}
.paopao {
  display: block;
  margin: 0 auto;
  width: 666px;
  height: 142px;
  margin-top: 20px;
}
// 规则及弹窗
.rule {
  // width: 132px;
  height: 51px;
  // background-color: #030303;
  border-radius: 0.27rem 0rem 0rem 0.27rem;
  // opacity: 0.3;
  position: absolute;
  // position: fixed;
  top: 0.3rem;
  right: 0rem;
}
.ruleWrap {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  z-index: 10;
  .closeBtn {
    width: 0.76rem;
    height: 0.76rem;
    position: absolute;
    top: 0.5rem;
    right: 0.4rem;
  }
  .ruleBorder {
    width: 8.67rem;
    height: 900px;
    overflow: scroll;
    background-color: #ffffff;
    border-radius: 0.11rem;
    color: #282828;
    font-size: 0.32rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    padding: 0.6rem 0.67rem;
    .ruleContent {
      .marTop {
        margin-top: 0.2rem;
      }
    }
  }
}

// 底部tabbar
.tabWrapper {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  width: 100%;
  height: 1.33rem;
  background-color: #ffffff;
  position: fixed;
  z-index: 1000;
  bottom: 0;
  .tabItem {
    width: 50%;
    border-right: 1px solid #cccccc;
    img {
      width: 0.54rem;
      height: 0.54rem;
      margin-right: 0.1rem;
    }
    p {
      display: inline-block;
      font-size: 0.4rem;
    }
  }
}
.Text {
  color: #646464;
}
.actText {
  color: #197fee;
}

// 秒杀商品
.bannerPic {
  width: 100%;
  height: 4rem;
  background-color: #ffffff;
  position: relative;
}
.vanTabs /deep/.van-tabs__wrap {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
}
.two {
  width: 10rem;
  height: 3rem;
  background-color: #ffffff;
  box-shadow: 0rem 0.03rem 0rem 0rem rgba(195, 192, 192, 0.35);
  // border-bottom: 1px solid #cccccc;
  p {
    text-align: center;
    font-size: 0.48rem;
    color: #fa0000;
    font-weight: 600;
    padding-top: 0.29rem;
  }
  .fontSizeG {
    @include sc(36px, #565656);
    padding-top: 0.51rem;
  }
  .timeWrap {
    height: 110px;
    display: flex;
    justify-content: center;
    color: #565656;
    font-size: 0.4rem;
    font-weight: 600;
    align-items: center;
    margin-top: 13px;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
    .txtStart {
      font-size: 0.44rem;
      color: #565656;
      margin-right: 0.39rem;
    }
    .green {
      width: 0.63rem;
      height: 0.53rem;
      background-color: #ff0000;
      border-radius: 0.07rem;
      text-align: center;
      font-size: 0.33rem;
      color: #fdfcfb;
    }
  }
  .seckillOver {
    color: #565656;
  }
}

// 秒杀商品  之 产品列表
.contentWrap {
  margin-bottom: 2rem;
}
.content {
  width: 690px;
  // min-height: 300px;
  display: flex;
  // padding: 0.43rem 0.47rem;
  padding: 20px;
  // padding-bottom: 0;
  margin: 0.4rem auto;
  background-color: #1c4237;
  border-radius: 15px;
  position: relative;
  img {
    // width: ;
    height: 3.13rem;
    border-radius: 0.11rem;
  }
  .center {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    justify-content: flex-start;
    margin-left: 0.2rem;
    // padding: 20px;
    .title {
      width: 420px;
      color: #ffffff;
      font-weight: 700;
      margin-bottom: 0.1rem;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      font-size: 26px;
      word-wrap: break-word;
    }
    .subtitle {
      width: 420px;
      color: #ffffff;
      margin-bottom: 0.1rem;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
      font-size: 22px;
      word-wrap: break-word;
    }
    .botWrapper {
      // display: flex;
      // align-items: flex-end;
      // justify-content: space-between;
      // align-items: center;
      width: 100%;
      .bot {
        .rest {
          width: 1.56rem;
          height: 0.59rem;
          border-radius: 0.11rem;
          border: solid 0.04rem #ff0000;
          text-align: center;
          font-size: 0.32rem;
          color: #ff0000;
          margin-bottom: 0.3rem;
        }
        .coin {
          line-height: 0.4rem;
          color: #ffd19b;
          margin-bottom: 0.2rem;
          font-size: 26px;
          // width: 80%;
          .spanimg {
            background-image: url(../../assets/images/seckill/zbtb.png);
            background-size: 100%;
            background-repeat: no-repeat;
            display: inline-block;
            width: 81px;
            height: 26px;
          }
        }
        .price {
          color: #ffffff;
          text-decoration: line-through;
        }
      }
    }
  }
  .btn {
    width: 2rem;
    height: 0.91rem;
    border-radius: 0.11rem;
    border: none;
    // margin-top: 2rem;
    font-size: 26px;
    color: #ffd19b;
    border: solid 1px #ffd19b;
    background-color: #1c4237;
    position: absolute;
    // bottom: 15px;
    right: 10px;
    bottom: 80px;
    padding: 0;
  }
  // .btnG {
  //   background-color: #c3c3c3;
  // }
  // .btnR {
  //   background-color: #fa0000;
  // }
}

// 我的商品
.mygoodsWrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  padding-bottom: 150px;
}
.myGoodsItem {
  margin-top: 0.5rem;
  box-shadow: 1px 1px 1px 1px #ebebeb;
  width: 95%;
  border-radius: 10px;
}
.mygoodsTop {
  display: flex;
  padding: 0.53rem;

  border-bottom: 1px solid #f5f5f5;
  img {
    width: 3.07rem;
    height: 3.07rem;
    border-radius: 0.11rem;
    margin-right: 0.3rem;
  }
  .right {
    font-size: 0.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .title {
      color: #010101;
    }
    .price {
      font-size: 0.35rem;
      color: #8d8d8d;
      text-decoration: line-through;
    }
    .timer {
      font-size: 0.37rem;
      color: #7f7d7d;
    }
  }
}
.red {
  color: #fc0303;
}

.btnWrap {
  width: 100%;
  height: 1.35rem;
  display: flex;
  justify-content: flex-end;
  button {
    width: 2.08rem;
    height: 0.8rem;
    border-radius: 0.11rem;
    border: solid 0.03rem #ff0000;
    background-color: #fff;
    color: #ff0000;
    margin-right: 0.2rem;
    margin-top: 0.3rem;
    .routerlink {
      color: #ff0000;
    }
  }
}
.btnimg {
  width: 130px;
  position: fixed;
  top: 300px;
  right: 30px;
}
</style>
